$h5:(
  c1:(
    base: #23c270,
    contrast: white
  ),
  c2:(
    base: #333333,
    contrast: white
  ),
  c3:(
    base:#666666,
    contrast: white
  ),
  c4:(
    base:  #999999,
    contrast: white
  ),
  c5:(
    base: #b5b5b5,
    contrast: white
  )      ,
  c6:(
    base:#c1c1c1,
    contrast: white
  ),
  c7:(
    base:#eeeeee,
    contrast: white
  ),
  c8:   (
    base: #e5e5e5,
    contrast: white
  )      ,
  c9:(
    base: #f0f0f0,
    contrast: white
  ),
  c10:(
    base: #ffffff,
    contrast: #22222e
  ),
  c11:(
    base: #e94141,
    contrast: white
  ),
  c12:(
    base: #ff7452,
    contrast: white
  ),
  c13:(
    base:  #4192f3,
    contrast: white
  ),
  c14:(
    base: #000000,
    contrast: white
  ),
  c15: (
    base: #ff8e00,
    contrast: white
  ),
  c16:(
    base: #89d035,
    contrast: white
  ),
  c17:(
    base: #23c270,
    contrast: white
  ),
  c24:(
    base: #70d77b,
    contrast: white
  ),
);
/*$h5:(
  c1:         #23c270,
  c2:         #333333,
  c3:         #666666,
  c4:         #999999,
  c5:         #b5b5b5,
  c6:         #c1c1c1,
  c7:         #eeeeee,
  c8:         #e5e5e5,
  c9:         #f0f0f0,
  c10:        #ffffff,
  c11:        #e94141,
  c12:        #ff7452,
  c13:        #4192f3,
  c14:        #000000,
  c15:        #ff8e00,
  c16:        #89d035
);*/
$f: (
  f1: 1.7rem,
  f2: 1.6rem,
  f3: 1.5rem,
  f4: 1.4rem,
  f5: 1.3rem,
  f6: 1.2rem,
  f7: 1.1rem,
  f8: 1rem,
  f9: 3rem,
  f11: 0.9rem,
  f12: 2.2rem,
  f13: 1.9rem,
  f14: 2rem,
  f15: 1.8rem,
  f16: 2.4rem,
  f17: 19.5rem
);
$app-default-font-size: 62.5%;//设置跟元素
$images-path: "/assets/images"; // image path
$icons-path: "/assets/icon"; // icon path
/*
* pxTorem
* @param:$px为需要转换的字号
*/

@function pxTorem($px){
  @if unitless($px){
    @return pxTorem($px + 0px);
  }
  @return $px / 20px * 1rem;
}

/*
* font-dpr
* @param:为设置fontsize而写的函数，根据ps效果图750分辨率上面的标注的fontsize来调用此函数，@include font-dpr(30px);
*/

@mixin font-dpr($font-size){
  font-size: $font-size / 20px * 1rem;
}

@function font-dpr-func($font-size){
  @return $font-size / 20px * 1rem;
}


@mixin set-color($color){
  color: color($h5,$color);
}

@mixin el-rect($width,$height){
  width:pxTorem($width);
  height:pxTorem($height);
}
/*
* icon
* @param:icon 路径
*/
@mixin icon($width,$height,$url){
  display: inline-block;
  width: pxTorem($width);
  height: pxTorem($height);
  background: url($url) no-repeat center center/contain;
}


@mixin over-ellipsis{
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*
* @param:width 文字超过指定百分比宽度显示省略号
*/
@mixin text-overflow-percent-ellipsis($width){
  @include over-ellipsis;
  max-width: ($width);
}

/*
* @param:width 文字超过指定最大宽度显示省略号
*/
@mixin text-overflow-max-ellipsis($width){
  @include over-ellipsis;
  max-width: pxTorem($width);
}

/*
* text-overflow-ellipsis
* @param:width 文字超过指定宽度显示省略号
*/
@mixin text-overflow-ellipsis($width){
  @include over-ellipsis;
  width: pxTorem($width);

}
/*
* @description 多行文本省略号
* @author ouyqx-691
* @date 2017/09/12
*/
@mixin multi-line-exllipsis($line){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

//获取字号
@function standard($target,$key){
  @return map_get($target,$key);
}

@mixin font-size($target){
  font-size:standard($f,$target)
}
//获取颜色
/*@function color($target,$key){

  @return map_get($target,$key)
}*/

/*@function test_color($target...){
  @if length($target) > 1 {
    @return map_get(nth($target,1),nth($target,2))
  } @else {
    @return map_get($h5,nth($target,1))
  }
}*/
@function color-key($colors, $value) {
  @each $color-name, $color-value in $colors {
    $base-value: color($colors, $color-name);
    @if ($base-value == $value) {
      @return map-get($colors, $color-name);
    }
  }

  @return $value;
}

@function color-contrast($colors, $value, $custom-contrast-mode: null) {
  $color-value: null;

  // If the value is a color (e.g. #fff)
  // we need to call color-key to see if
  // it exists in the color map or not
  @if (type-of($value) == color) {
    $color-value: color-key($colors, $value);

  } @else {
    // If the value is a string (e.g. primary)
    // we want to get the value from the map
    // where it is the key
    $color-value: map-get($colors, $value);
  }


  @return $color-value;
}
@function get-colors($colors, $custom-contrast-mode: null) {
  $colors-list: ();

  @each $color-name, $color-value in $colors {
    $color-base: null;
    $color-contrast: null;

    @if(type-of($color-value) == map) {
      $color-base: map-get($color-value, base);
      $color-contrast: map-get($color-value, contrast);
    } @else {
      $color-base: $color-value;
      $color-contrast: color-contrast($colors, $color-value, $custom-contrast-mode);
    }

    $colors-list: append($colors-list, ($color-name, $color-base, $color-contrast), comma);
  }

  @return $colors-list;
}
@function color($target...){
  $color-base: null;
  @if length($target) > 1 {
    @each $color-name, $color-value in $h5 {
      @if(type-of($color-value) == map ) {
        @if($color-name == nth($target,2) ){
          //@warn "if1'==$color-nam:#{$color-name},colorValue:#{$color-value},nth:#{nth($target,2)}',length:#{length($target)}";
          $color-base: map_get($color-value,base);
          @return $color-base;
        }
      } @else {
        $color-base: $color-value;
        @return $color-base;
      }

    }
  } @else {

    @each $color-name, $color-value in $h5 {
      @if(type-of($color-value) == map) {
        @if($color-name == nth($target,1) ){
          //@warn "else1'==$color-nam:#{$color-name},colorValue:#{$color-value},nth:#{nth($target,1)}',length:#{length($target)}";
          $color-base: map_get($color-value,base);
          @return $color-base;
        }
      }@else {
        $color-base: $color-value;
        @return $color-base;
      }
     // @return $color-base;
    }

  }
}

/*@function color($target...){
  @if length($target) > 1 {
    @return map_get(nth($target,1),nth($target,2))
  } @else {
    @return map_get($h5,nth($target,1))
  }
}*/
//获取颜色
/*@function color($target...){
  @if length($target) > 1 {
    @each $color-name, $color-base, $color-contrast in get-colors(nth($target,1)){
      @return $color-base;
    }
  } @else {

    @each $color-name, $color-value in $h5 {
      $color-base: null;
      $color-contrast: null;

      @if(type-of($color-value) == map) {
        $color-base: map-get($color-value, base);
      } @else {
        $color-base: $color-value;
      }
      @return $color-base;
    }

  }
}*/

@mixin mix-dpr($type,$value) {
  #{$type}: $value / 2 + px;
}

@mixin font($font-size,$font-weight: normal,$color: null){

  font-size: font-dpr-func($font-size);
  font-weight: $font-weight;
  @if($color) {
    color: $color;
  }
}
